<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 事件调用方法没有参数 -->
			<!-- 在事件定义的时候,写函数省略了小括号,但是方法本身是需要一个参数的 -->
			<button type="button" @click="btnClick">按钮1</button>
			<button type="button" @click="btnClick()">按钮1</button>
			
			<!-- 定义的方法有参数,但没写括号会打印出事件函数 -->
			<!-- 定义的方法有参数,但写括号没参数会打印出undefined -->
			<button type="button" @click="btnClick2">按钮2</button>
			<button type="button" @click="btnClick2()">按钮2</button>
			<!-- 方法定义的时候,我们需要event对象,同时又要其他参数 -->
			<!-- 手动获取event对象 -->
			<!-- 传入的参数一定是数字或者字符串,如果是不带双引号的字符会默认为data中的属性 -->
			<button type="button" @click="btnClick3">按钮3</button>
			<button type="button" @click="btnClick3(123,$event)">按钮3</button>
			
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
		const app = new Vue({
			el: "#app",
			data:{
				message: "你好啊"
			},
			methods:{
				btnClick(){
					console.log("hello world");
				},
				btnClick2(abc){
					console.log("---",abc);
				},
				btnClick3(abc,event){
					console.log("+++",abc,event);
				}
				
			}
		})
		
		// 不传参数会打印undefined
		function abc(name){
			console.log(name);
		}
		abc();
	</script>
</html>
